<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="基础使用"
					@onClick="notifyRef.show({ message: '这是一条通知' })"
					showArrow
				></pure-cell>
			</pj-demo>

			<!-- 通知主题 -->
			<pj-demo title="通知主题">
				<pure-flex direction="column">
					<pure-cell
						title="主要通知"
						@onClick="notifyRef.show({ message: '这是一条主要通知', theme: 'primary' })"
						showArrow
						style="color: var(--pure-theme-primary)"
					></pure-cell>
					<pure-cell
						title="成功通知"
						@onClick="notifyRef.show({ message: '这是一条成功通知', theme: 'success' })"
						showArrow
						style="color: var(--pure-theme-success)"
					></pure-cell>
					<pure-cell
						title="警告通知"
						@onClick="notifyRef.show({ message: '这是一条警告通知', theme: 'warning' })"
						showArrow
						style="color: var(--pure-theme-warning)"
					></pure-cell>
					<pure-cell
						title="错误通知"
						@onClick="notifyRef.show({ message: '这是一条错误通知', theme: 'danger' })"
						showArrow
						style="color: var(--pure-theme-danger)"
					></pure-cell>
					<pure-cell
						title="信息通知"
						@onClick="notifyRef.show({ message: '这是一条信息通知', theme: 'info' })"
						showArrow
						style="color: var(--pure-theme-info)"
					></pure-cell>
					<pure-cell
						title="自定义主题"
						@onClick="notifyRef.show({ message: '这是一条自定义主题通知', theme: '--notify-theme-blue' })"
						showArrow
						style="color: var(--notify-theme-blue)"
					></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 通知位置 -->
			<pj-demo title="通知位置">
				<pure-cell
					title="底部通知"
					@onClick="notifyRef.show({ message: '这是一条底部通知', position: 'bottom' })"
					showArrow
				></pure-cell>
			</pj-demo>

			<!-- 自定义位置 -->
			<pj-demo title="自定义位置">
				<pure-cell
					title="自定义位置"
					@onClick="notifyRef.show({ message: '这是一条底部通知', top: '100px' })"
					showArrow
				></pure-cell>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>

		<pure-notify
			ref="notifyRef"
			@onClick="handleClick"
		></pure-notify>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 组件实例
	const notifyRef = ref(null);

	// 点击事件
	function handleClick() {
		uni.showToast({ title: "点击了通知", icon: "none" });
	}
</script>

<style lang="scss" scoped>
	.page {
		--notify-theme-blue: blue;
	}
</style>
